<template>
  <div style="width: 75%" class="user-form">
    <el-form ref="form" :model="form" label-width="80px" style="margin-top: -50px">
      <el-form-item label="用户名">
        <el-input v-model="form.name" type="text" width></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="form.password2" type="password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.eamil" type="eamil"></el-input>
      </el-form-item>
      <br />
      <div></div>
      <el-form-item>
        <div class="btn-user">
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button type="danger">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        password: '',
        password2: '',
        delivery: false,
        eamil: '',
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    onSubmit() {
      if (this.form.password != this.form.password2) {
        this.$message.error('两次密码不一致')
        return false
      }
      let formData = {}
      for (const key in this.form) {
        if (this.form[key]) {
          formData[key] = this.form[key]
        }
      }
      this.$http('post', '/users/update_sys', formData).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message.success('修改成功, 请重新登录')
          this.$router.replace({
            path: '/'
          })
        }
      })
    }
  }
}
</script>

<style>
.user-form .el-input {
  margin-left: 20px;
}
.btn-user {
  width: 930px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.btn-user .el-button {
  width: 120px !important;
}
</style>
